let lists = ['学习 JavaScript','学习 Css3','学习HTML5'];
/*
 <li class="list-group-item d-flex justify-content-between align-items-center">
     <span>javascript</span>
     <button type="button" class="close" aria-label="Close">&times;/button>
 </li>
 */
function l(){
    document.querySelector('#ul').innerHTML = '';
    for(let i = 0; i < lists.length; i++){
        let li = document.createElement('li');
        li.className = 'list-group-item d-flex justify-content-between align-items-center';
        let ul = document.querySelector('#ul');
        ul.appendChild(li);
        let span = document.createElement('span');
        let spantext = document.createTextNode(lists[i]);
        span.appendChild(spantext);
        li.appendChild(span);

        span.setAttribute('contenteditable',false);

        span.addEventListener('dblclick',function(){
            span.setAttribute('contenteditable',true);
        })
        span.addEventListener('blur',function(){
            span.setAttribute('contenteditable',false);
        })

        let button = document.createElement('button');
        button.type = 'button';
        button.innerHTML = '&times;';
        button.className = 'close';
        li.appendChild(button);
        button.addEventListener('click',function(){
            console.log(i);
            lists.splice(i,1);
            l();
        })

    }
}
 //默认先循环一遍数组内容
l();

var btn = document.querySelector('#btn');
btn.addEventListener('click', function () {
    var ipt = document.querySelector('#ipt');
    if(ipt.value != ''){
        lists.unshift(ipt.value);
        //追加完毕之后，把input中的内容清空！
        ipt.value = '';
    }else {
        alert('内容不能为空，请重新输入！')
    }

    l();
});

